<template>
  <div class="app-container">

    <vxe-grid
      ref="xGrid"
      border
      resizable
      keep-source
      size="small"
      align="center"
      round
      highlight-hover-row
      :loading="loading"
      :pager-config="tablePage"
      :columns="tableColumn"
      :data="tableData"
      :form-config="tableForm"
      :toolbar="{slots: {buttons: 'toolbar_buttons'}}"
      @page-change="page"
      @form-submit="search"
    >
      <template v-slot:operate="{ row }">
        <el-button v-has="perms.edit" type="primary" size="mini" @click="edit(row)">编辑</el-button>
        <el-button v-has="perms.delete" type="danger" size="mini" @click="remove(row)">删除</el-button>
      </template>

      <template v-slot:toolbar_buttons>
        <vxe-button v-has="perms.add" size="mini" status="primary" icon="fa fa-plus" @click="add">新增</vxe-button>
      </template>
    </vxe-grid>
  </div>
</template>
<script>
import api from '@/api/landPage'
import strings from '@/utils/strings'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogTitle: '',
      name: '落地页',
      submitLoading: false,
      tableData: [],
      goods: [],
      role: 'landPage',
      perms: {
        add: this.role + ':add',
        edit: this.role + ':edit',
        delete: this.role + ':delete'
      },
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableForm: {
        data: {
          name: '',
          title: '',
          status: ''
        },
        items: [
          { field: 'name', title: '名称:', itemRender: { name: '$input', props: { placeholder: '请输入', clearable: true }}},
          { field: 'title', title: '落地页标题:', itemRender: { name: '$input', props: { placeholder: '请输入', clearable: true }}},
          { field: 'status', title: '状态:', itemRender: { name: '$select', options: [], props: { placeholder: '请选择', clearable: true }}},
          { itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' }}, { props: { type: 'reset', content: '重置' }}] }}
        ]
      },
      tableColumn: [
        { type: 'seq', width: 40 },
        { field: 'name', title: '名称' },
        { field: 'title', title: '落地页标题' },
        { field: 'statusValue', title: '状态' },
        { title: '操作', width: 180, fixed: 'right', slots: { default: 'operate' }}
      ]
    }
  },
  mounted() {
  },
  created() {
    this.listData()
    this.loadLandPageStatus()
  },
  methods: {
    listData() {
      this.loading = true
      this.tableForm.data.page = this.tablePage.currentPage
      this.tableForm.data.pageSize = this.tablePage.pageSize
      api.pageData(this.tableForm.data).then(res => {
        const data = res.data
        this.tableData = data.data
        this.tablePage.currentPage = parseInt(data.page)
        this.tablePage.pageSize = parseInt(data.pageSize)
        this.tablePage.total = parseInt(data.total)
        this.loading = false
      })
    },
    search() {
      this.tablePage.currentPage = 1
      this.listData()
    },
    page({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.listData()
    },
    add() {
      this.$router.push({ path: '/common/landPage-edit' })
    },
    remove(row) {
      this.$confirm(strings.delMsg, strings.prompt, {
        confirmButtonText: strings.ok,
        cancelButtonText: strings.cancel,
        type: 'warning'
      }).then(() => {
        this.loading = true
        api.remove(row.id).then(res => {
          this.listData()
        }, () => {
          this.loading = false
        })
      })
    },
    edit(row) {
      this.$router.push({ path: '/common/landPage-edit', query: { id: row.id }})
    },
    loadLandPageStatus() {
      api.status().then(res => {
        this.tableForm.items[2].itemRender.options = this.mappingArray({ code: 'value', value: 'label' }, res.data)
      })
    }
  }
}
</script>
<style lang="sass" scoped>

</style>
